// vite 的是 直接将 场景预设成 web 环境的 然后 在这个预设下 进行设计的
// webpack 是 没有预舍 环境的 ， 所以 很灵活 能进行配置的 都可以配置

// 命令 vite：开发环境，
// vite build：生产环境
// vite preview：预览生产环境  就是 build 之后 用这个命令 可以看打包后的 预览
// vite optimize:依赖预构建

import { ConfigEnv, defineConfig, UserConfig, loadEnv } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue';
// node 环境默认 没有声明这个path 的类型声明 下载 @types/node

// Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

// .env                # 所有情况下都会加载
// .env.local          # 所有情况下都会加载，但会被 git 忽略
// .env.[mode]         # 只在指定模式下加载
// .env.[mode].local   # 只在指定模式下加载，但会被 git 忽略
// .env 是默认的 env.xxx 会 合并 .env 中的变量
// 这里的 .env.xx 是和 mode 模式对应的 ， 比如 mode 是 development 那么就会加载 .env.development

// defineConfig 可以提供 配置提示
export default defineConfig((configEnv: ConfigEnv): UserConfig => {
  console.log(configEnv.command, configEnv.mode, 'log');
  // mode 环境变量 test 或者 development 或者 production 自己配置 vite -- test --
  // command 命令行参数 build 或者 是 server 默认执行 vite 是 server vite build command 是build
  const env = process.env; // 读取 node 环境变量
  // console.log(env, 'env');
  const root = process.cwd(); // 项目根目录
  // mode 表示当前情景 root表示项目根路径，'' 表示前缀，''默认读取所有的环境变量
  // const viteEnv = loadEnv(configEnv.mode, root, ''); // 读取环境变量
  // console.log(viteEnv, 'viteEnv'); // 读取环境变量 + node 本身的环境变量

  const viteEnv = loadEnv(configEnv.mode, root, 'VITE_'); // 只读取 VITE_ 开头的环境变量
  const port = Number(viteEnv.VITE_PORT) || 3000; // 端口号
  const open = Boolean(viteEnv.VITE_OPEN) || true; // 是否自动打开浏览器
  console.log(viteEnv, 'viteEnv');

  // import.meta.env 在源代码中 这么获取环境变量  一些默认的 和 VITE_ 开头的环境变量 才能读取到

  return {
    root: root, // 项目根目录
    plugins: [vue()],
    server: {
      port: port, // 服务器端口号
      open: open, // 自动打开 或者配置字符串 打开 url不同
    },
    esbuild: {
      // 生产环境下 移除 console.log debugger
      pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
    },
  };
});

// vue 环境 @vitejs/plugin-vue  -D 加入这个包
